<template>
  <div style="padding:20px 20px 40px 20px">
    <el-card shadow="hover">
      <el-form inline>
          <el-form-item>
              <el-input v-model="params.authorityName" placeholder="请输入机构名称"></el-input>
          </el-form-item>
          <el-form-item>
             <el-select @change="changeAddress(params.provinceId,1)" v-model="params.provinceId" placeholder="请选择省">
                <el-option
                v-for="item in provOp"
                :key="item.id"
                :label="item.cityname"
                :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
             <el-select @change="changeAddress(params.cityId,2)" v-model="params.cityId" placeholder="请选择市">
                <el-option
                v-for="item in citOp"
                :key="item.id"
                :label="item.cityname"
                :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
             <el-select v-model="params.areaId" placeholder="请选择区">
                <el-option
                v-for="item in areOp"
                :key="item.id"
                :label="item.cityname"
                :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="search" >搜索</el-button>
            <el-button type="warning" size="small" @click="add" >新增</el-button>
            <el-button @click="cancelData" size="small"
            >重置</el-button
            >
          </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top:20px" shadow="hover">
      <el-table
        max-height="550"
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="authorityName"
          label="机构名称"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="linkman"
          label="联系人"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="机构logo"
          align="center"
          min-width="150"
        >
        <template slot-scope="scope">
            <img style="width:100px;height:100px" :src="showUrl + scope.row.logo" alt="">
        </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="230"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="ed(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="imgVisible" width="700px" :close-on-click-modal="false">
        <el-form style="height:700px;overflow: auto;" :model="form" ref="form" :rules="rules" label-width="130px">
            <el-form-item prop="authorityName" label="机构名称">
                <el-input v-model="form.authorityName"></el-input>
            </el-form-item>
            <el-form-item prop="authorityName" label="合作机构">
                 <el-select v-model="form.type" placeholder="请选择合作机构">
                    <el-option label="普通机构" :value="0"></el-option>
                    <el-option label="认证机构" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="acronym" label="机构简称">
                <el-input v-model="form.acronym"></el-input>
            </el-form-item>
            <el-form-item  label="seo标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="keywords关键词">
                <el-input v-model="form.keywords"></el-input>
            </el-form-item>
            <el-form-item  label="description描述">
                <el-input v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item prop="linkman" label="联系人">
                <el-input v-model="form.linkman"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="联系电话">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item prop="crantNo" label="机构批准号">
                <el-input v-model="form.crantNo"></el-input>
            </el-form-item>
            <el-form-item prop="legalName" label="法定代表人姓名">
                <el-input v-model="form.legalName"></el-input>
            </el-form-item>
            <el-form-item prop="capital" label="注册资本">
                <el-input v-model="form.capital"></el-input>
            </el-form-item>
            <el-form-item prop="companyType" label="公司类型">
                <el-input v-model="form.companyType"></el-input>
            </el-form-item>
            <el-form-item prop="startDate" label="成立日期">
                <el-input v-model="form.startDate"></el-input>
            </el-form-item>
            <el-form-item prop="operateType" label="经营状态">
                <el-input v-model="form.operateType"></el-input>
            </el-form-item>
            <el-form-item prop="registered" label="注册地址">
                <el-input v-model="form.registered"></el-input>
            </el-form-item>
            <el-form-item prop="creditCode" label="社会信用代码">
                <el-input v-model="form.creditCode"></el-input>
            </el-form-item>
            <el-form-item prop="scopeRange" label="	经营范围">
                <el-input v-model="form.scopeRange"></el-input>
            </el-form-item>
            <el-form-item  label="审核状态">
                <el-select v-model="form.status" placeholder="请选择审核状态" >
                    <el-option label="已通过" :value="1"></el-option>
                    <el-option label="未通过" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="sort" label="排序">
                <el-input-number v-model="form.sort"></el-input-number>
            </el-form-item>
            <el-form-item prop="provinceId" label="省市区">
                <el-select @change="changeAddress1(form.provinceId,1)" v-model="form.provinceId" placeholder="请选择省">
                    <el-option
                    v-for="item in provOp1"
                    :key="item.id"
                    :label="item.cityname"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="cityId">
              <el-select @change="changeAddress1(form.cityId,2)" v-model="form.cityId" placeholder="请选择市">
                    <el-option
                    v-for="item in citOp1"
                    :key="item.id"
                    :label="item.cityname"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="areaId">
                <el-select @change="addressChange()"  v-model="form.areaId" placeholder="请选择区">
                    <el-option
                    v-for="item in areOp1"
                    :key="item.id"
                    :label="item.cityname"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="address" label="地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item prop="logo" label="机构logo">
                <el-upload class="avatar-uploader" :action="upImage + '/cms/company/upload'" :show-file-list="false" :on-success="handleAvatarSuccess">
                <img v-if="form.logo" :src="showUrl + form.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="机构介绍">
              <Editor ref="conEditor" v-model="form.introduct" />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="imgVisible = false" size="small">取消</el-button>
        <el-button @click="submitForm" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import Editor from "@/components/Editor";
import {getList00 ,seleCity,sureAdd,sureEd1,delSure} from '@/api/web/auth'

export default {  
  components: {
    Editor
  },
    data(){
        return{
            loading:true,
            tableData:[],
            headers: { Authorization: "Bearer " + getToken() },
            upImage: process.env.VUE_APP_BASE_API,
            form:{
                id:'',
                authorityName:'',
                linkman:'',
                type:'',
                phone:'',
                logo:'',
                sort:'',
                introduct:'',
                address:'',
                legalName:'',
                provinceId:'',
                cityId:'',
                areaId:'',
                capital:'',
                startDate:'',
                companyType:'',
                operateType:'',
                registered:'',
                creditCode:'',
                scopeRange:'',
                crantNo:'',
                scope:'',
                acronym:''
            },
            title:'',
            imgVisible:false,
            // 省市区数组
            areOp:[],
            citOp:[],
            provOp:[],
            areOp1:[],
            citOp1:[],
            provOp1:[],
            // 分页
            params: {
                pageNum: 1,
                pageSize: 10,
                authorityName:'',
                provinceId:'',
                cityId:'',
                areaId:'',
                status:1
            },
            pageTotal:0,
            rules: {
                authorityName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                 acronym: [
                    { required: true, message: '请输入简称', trigger: 'blur' },
                ],
                linkman: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                phone: [
                    {  required: true, message: '请输入联系人电话', trigger: 'blur' }
                ],
                crantNo: [
                    {  required: true, message: '请输入机构批准号', trigger: 'blur' }
                ],
                introduct: [
                    { required: true, message: '请输入机构简介', trigger: 'blur' }
                ],               
                legalName: [
                    { required: true, message: '请输入法定代表人姓名', trigger: 'blur' }
                ],   
                address : [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ],           
                capital: [
                    { required: true, message: '请输入注册资本', trigger: 'blur' }
                ],             
                startDate: [
                    { required: true, message: '请输入成立日期', trigger: 'blur' }
                ],            
                companyType: [
                    {  required: true, message: '请输入公司类型', trigger: 'blur' }
                ],            
                operateType: [
                    {  required: true, message: '请输入经营状态', trigger: 'blur' }
                ],           
                registered: [
                    {  required: true, message: '请输入注册地址', trigger: 'blur' }
                ],          
                creditCode: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
                ],         
                scopeRange: [
                    {  required: true, message: '请输入经营范围', trigger: 'blur' }
                ],
                provinceId: [
                    { required: true, message: '请选择省', trigger: 'change' }
                ],
                cityId: [
                    { required: true, message: '请选择市', trigger: 'change' }
                ],
                areaId: [
                    { required: true, message: '请选择区县', trigger: 'change' }
                ],
                logo:[
                    { required: true, message: '请上传图片', trigger: 'change' }
                ],
                title:[
                    { required: true, message: '请输入seo标题', trigger: 'change' }
                ],
                keywords:[
                    { required: true, message: '请输入keywords关键词', trigger: 'change' }
                ],
                description:[
                    { required: true, message: '请输入description描述', trigger: 'change' }
                ],
            }
        }
    },
    methods:{
        // handleClose(done) {
        //         this.$confirm('确认关闭？')
        //         .then(_ => {
        //             done();
        //         })
        //         .catch(_ => {});
        //     },
        // 搜索
        search() {
            this.params.pageNum = 1
            this.getData00()
        },
        // 新增
        add() {
            this.getCity1('',1)
            this.title = '新增'
         
            this.form = {
                id:'',
                authorityName:'',
                linkman:'',
                type:'',
                phone:'',
                logo:'',
                sort:10,
                introduct:'',
                address:'',
                legalName:'',
                provinceId:'',
                cityId:'',
                areaId:'',
                capital:'',
                startDate:'',
                companyType:'',
                operateType:'',
                registered:'',
                creditCode:'',
                scopeRange:'',
                crantNo:'',
                scope:'',
                title:'',
            }
            this.imgVisible = true
        },
        // 编辑
        ed(row) {
            console.log(row,'row')
            this.imgVisible = true
            
            this.$nextTick(() => {
                this.form = JSON.parse(JSON.stringify(row));
                })
            this.getCity1('',1)
            this.getCity1(this.form.provinceId,2)
            this.getCity1(this.form.cityId,3)
            this.title = '编辑'
        },
        // 重置搜索框
        cancelData() {
            this.params = {
                pageNum: 1,
                pageSize: 10,
                authorityName:'',
                provinceId:'',
                cityId:'',
                areaId:'',
            },
            this.getData00();
        },
        // 提交
        submitForm() {
            // if(this.form.title = ''){
            //     this.form.title = this.authorityName
            //     }else{
            //         this.form.title=this.form.title
            // }
              this.$refs['form'].validate((valid) => {
                if (valid) {
                        if(this.form.title == ''||this.form.title == null){
                            this.form.title = `${this.form.authorityName},${this.form.acronym},${this.form.phone},_玖零零幺时代科技`
                        }
                        if(this.form.keywords == ''||this.form.keywords == null){
                            this.form.keywords = `${this.form.authorityName},${this.form.acronym},${this.form.phone},认证平台,玖零零幺时代科技`
                        }
                        if(this.form.description == ''||this.form.description == null){
                            console.log(this.$refs.conEditor)
                            this.form.description = this.$refs.conEditor._data.editor.txt.text().substring(0,100)
                        }
                     if(this.title == '新增'){
                        sureAdd(this.form).then(res => {
                            if(res.code == 200){
                                this.$message.success('新增成功')
                                this.imgVisible = false
                                this.getData00()
                            }
                        })
                    }else {
                        sureEd1(this.form).then(res => {
                            if(res.code == 200){
                            this.$message.success('编辑成功')
                                this.imgVisible = false
                                this.getData00()
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
        },
        // 删除
        del(row){
            this.$confirm('此操作将删除该机构, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                delSure(row.id).then(res => {
                    if(res.code == 200){
                        this.$message.success('删除成功')
                        this.getData00()
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });

        },
        // 拼接
        addressChange() {
            this.form.address = this.change(this.form.provinceId,1) + this.change(this.form.cityId,2) + this.change(this.form.areaId,3) 
        },
        // 拼接方法
        change(id,type){
            if(type == 1){
                for(let i =0;i<this.provOp1.length;i++){
                    if(this.provOp1[i].id == id){
                        return this.provOp1[i].cityname
                    }
                }
            // 获取市
            }else if(type == 2){
                for(let i =0;i<this.citOp1.length;i++){
                    console.log(id)
                    if(this.citOp1[i].id == id){
                        return this.citOp1[i].cityname
                    }
                }
            }else if(type == 3){
                for(let i =0;i<this.areOp1.length;i++){
                    if(this.areOp1[i].id == id){
                        return this.areOp1[i].cityname
                    }
                }
            }
        },
        // 上传
        handleAvatarSuccess(res) {
            if(res.code == 200){
                this.form.logo = res.data
            }
        },
        // 获取省市区
        getCity(id,type) {
            let region = {
                  type:type,
                  pid:id
                }
            seleCity(region).then(res => {
                if (res.code == 200) {
                // 获取省
                if(type == 1){
                    this.provOp = res.rows;
                // 获取市
                }else if(type == 2){
                    this.citOp = res.rows;
                }else if(type == 3){
                    this.areOp = res.rows;
                }
                }
            })
        },
        // 获取省市区
        getCity1(id,type) {
            let region = {
                  type:type,
                  pid:id
                }
            seleCity(region).then(res => {
                if (res.code == 200) {
                // 获取省
                if(type == 1){
                    this.provOp1 = res.rows;
                // 获取市
                }else if(type == 2){
                    this.citOp1 = res.rows;
                }else if(type == 3){
                    this.areOp1 = res.rows;
                }
                }
            })
        },
        changeAddress1(id,type) {
            // 选择了省
            if(type == 1){
                this.citOp1 = [];
                this.areOp1 = [];
                this.form.areaId = "";
                this.form.cityId = "";
                this.getCity1(id,2)
            }else if(type == 2){
                // 选择了市区
                this.form.areaId = "";
                this.areOp1 = [];
                this.getCity1(id,3)
            }
        },
        changeAddress(id,type) {
            // 选择了省
            if(type == 1){
                this.citOp = [];
                this.areOp = [];
                this.params.areaId = "";
                this.params.cityId = "";
                this.getCity(id,2)
            }else if(type == 2){
                // 选择了市区
                this.params.areaId = "";
                this.areOp = [];
                this.getCity(id,3)
            }
        },
        // 获取列表
        getData00() {
            getList00(this.params).then(res => {
                if(res.code == 200){
                    this.tableData = res.rows;
                    this.pageTotal = res.total;
                    this.loading = false;
                }
            })
        }
    },
    created(){
        this.getData00()
        this.getCity('',1)
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>